<template>
	<view class="content">
		<uni-search-bar class="search" bgColor="white" placeholder="搜索" @confirm="search"></uni-search-bar>
		<view class="create">			
			<text class="text1">创建新的聊天</text>
			<uni-icons class="arrowright" type="arrowright" size="20"></uni-icons>
		</view>
		
		<view class="recent">
			<text class="text2">最近聊天</text>
		</view>
		
		<view class="my-home">
			<!-- 群头像 -->
			<view class="group-img">
				<img src="/static/home.png" alt="">
			</view>
			<!-- 群名 -->
			<view class="group-id">
				<text class="text3">我的家</text>
			</view>
		</view>
		<view class="big">
			
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello'
			}
		},
		onLoad() {

		},
		methods: {

		}
	}
</script>

<style>
/* 搜索框 */
.search {
	margin-top: -20rpx;
}
/* 创建聊天 */
.create {
	height: 100rpx;
	background-color: white;
	position: relative;
	border-bottom: solid 1rpx #f1f1f1;
}
.text1 {
	position: absolute;
	top: 30rpx;
	left: 30rpx;	
}
.arrowright {
	position: absolute;
	right: 30rpx;
	bottom: 30rpx;
	color: #c9c9cd !important;
}
/* 最近聊天 */
.recent {
	height: 50rpx;
	line-height: 50rpx;
}
.text2 {
	margin-left: 30rpx;
	font-size: 28rpx;
	color: #bdbcbd;
}
/* 我的家 */
.my-home {
	height: 120rpx;
	background-color: white;
	display: flex;
}
/* 群头像 */
img {
	width: 80rpx;
	height: 80rpx;
	position: absolute;
	top: 20rpx;
	left: 50rpx;
}
.group-img {
	width: 150rpx;
	position: relative;
	
}
/* 群名 */
.group-id {
	height: 120rpx;
	width: 600rpx;
	line-height: 120rpx;
	border-bottom: solid 1rpx #bdbcbd;
}
.text3 {
	font-weight: 500;
}
.big {
	width: 750rpx;
	height: 1000rpx;
	background-color: white;
}
</style>
